<template>
	<view class="logistics-page">
		
		<!-- 订单列表 -->
			<view class="order-item" v-for="(order, index) in orderList" :key="index" @tap="viewOrderDetail(order)">
				<!-- 配送状态 -->
				<view class="delivery-status">
					<view class="status-left">
						<image class="truck-icon" src="/static/svg/delivery-truck.svg" mode="aspectFit"></image>
						<text class="status-text">{{ order.status }}</text>
					</view>
					<view class="status-time">{{ order.time }}</view>
				</view>
				
				<!-- 商品信息 -->
				<view class="product-info">
					<image class="product-image" :src="order.productImage" mode="aspectFill"></image>
					<view class="product-details">
						<text class="product-name">{{ order.productName }}</text>
						<text class="order-number">订单编号：{{ order.orderNumber }}</text>
					</view>
					<view class="arrow-icon">
						<image src="/static/svg/right-arrow.svg" mode="aspectFit" class="arrow"></image>
					</view>
				</view>
			</view>

		<!-- 加载更多 -->
		<view class="loading-more" v-if="showLoading">
			<view class="loading-icon">
				<view class="loading-dot"></view>
				<view class="loading-dot"></view>
				<view class="loading-dot"></view>
			</view>
			<text class="loading-text">数据加载中</text>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

// 响应式数据
const orderList = ref([])
const showLoading = ref(true)
const refreshing = ref(false)

// 模拟订单数据
const mockOrderData = [
	{
		id: 1,
		status: '订单配送中...',
		time: '下午 2:30',
		productName: '艾丽苏抹茶蛋糕早点低糖健康30盒大容量装',
		orderNumber: '2018090606025',
		productImage: '/static/svg/matcha-cake-realistic.svg'
	},
	{
		id: 2,
		status: '订单配送中...',
		time: '下午 2:30',
		productName: '艾丽苏抹茶蛋糕早点低糖健康30盒大容量装',
		orderNumber: '2018090606025',
		productImage: '/static/svg/matcha-cake-realistic.svg'
	},
	{
		id: 3,
		status: '订单配送中...',
		time: '下午 2:30',
		productName: '艾丽苏抹茶蛋糕早点低糖健康30盒大容量装',
		orderNumber: '2018090606025',
		productImage: '/static/svg/matcha-cake-realistic.svg'
	},
	{
		id: 4,
		status: '订单配送中...',
		time: '下午 2:30',
		productName: '艾丽苏抹茶蛋糕早点低糖健康30盒大容量装',
		orderNumber: '2018090606025',
		productImage: '/static/svg/matcha-cake-realistic.svg'
	}
]

// 页面加载
onMounted(() => {
	loadOrderData()
})

// 加载订单数据
const loadOrderData = () => {
	setTimeout(() => {
		orderList.value = mockOrderData
		showLoading.value = false
		refreshing.value = false
	}, 1500)
}

// 加载更多
const loadMore = () => {
	// 实现加载更多逻辑
	console.log('加载更多数据')
}

// 下拉刷新
const onRefresh = () => {
	refreshing.value = true
	setTimeout(() => {
		loadOrderData()
	}, 100)
}

// 查看订单详情
const viewOrderDetail = (order) => {
	// 实现查看订单详情逻辑
	uni.showToast({
		title: `查看订单 ${order.orderNumber}`,
		icon: 'none'
	})
}
</script>

<style scoped>
.logistics-page {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding: 0;
	display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
}

.page-header {
	background-color: #ffffff;
	padding: 44px 20px 20px;
	text-align: center;
	border-bottom: 1px solid #f0f0f0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.page-title {
	font-size: 18px;
	font-weight: 600;
	color: #333333;
}

.order-list {
	height: 100vh;
	flex-direction: column;
	align-items: center;
}

.order-item {
	background-color: #ffffff;
	border-radius: 16px;
	margin: 12px 0;
	padding: 20px 16px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
	border: 1px solid #f5f5f5;
	transition: all 0.2s ease;
	box-sizing: border-box;
    width: 93vw;
}

.order-item:active {
	transform: scale(0.98);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}

.delivery-status {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid #f8f8f8;
}

.status-left {
	display: flex;
	align-items: center;
}

.truck-icon {
	width: 22px;
	height: 22px;
	margin-right: 10px;
}

.status-text {
	font-size: 16px;
	color: #333333;
	font-weight: 500;
}

.status-time {
	font-size: 14px;
	color: #999999;
	font-weight: 400;
}

.product-info {
	display: flex;
	align-items: center;
}

.product-image {
	width: 64px;
	height: 64px;
	border-radius: 12px;
	margin-right: 14px;
	background-color: #f8f8f8;
	border: 1px solid #f0f0f0;
}

.product-details {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.product-name {
	font-size: 15px;
	color: #333333;
	line-height: 1.5;
	margin-bottom: 8px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-weight: 400;
}

.order-number {
	font-size: 13px;
	color: #999999;
	font-weight: 400;
}

.arrow-icon {
	margin-left: 8px;
	display: flex;
	align-items: center;
}

.arrow {
	width: 16px;
	height: 16px;
	opacity: 0.6;
}

.loading-more {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}

.loading-icon {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
}

.loading-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background-color: #4CAF50;
	margin: 0 3px;
	animation: loading-bounce 1.4s ease-in-out infinite both;
}

.loading-dot:nth-child(1) {
	animation-delay: -0.32s;
}

.loading-dot:nth-child(2) {
	animation-delay: -0.16s;
}

.loading-text {
	font-size: 14px;
	color: #666666;
	font-weight: 400;
}

@keyframes loading-bounce {
	0%, 80%, 100% {
		transform: scale(0.8);
		opacity: 0.5;
	}
	40% {
		transform: scale(1);
		opacity: 1;
	}
}

/* 适配不同屏幕 */
@media screen and (max-width: 375px) {
	.order-item {
		margin: 10px 0;
		padding: 16px 14px;
		border-radius: 12px;
	}
	
	.product-name {
		font-size: 14px;
	}
	
	.status-text {
		font-size: 15px;
	}
	
	.product-image {
		width: 56px;
		height: 56px;
	}
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
	.logistics-page {
		background-color: #121212;
	}
	
	.page-header {
		background-color: #1e1e1e;
		border-bottom-color: #333333;
	}
	
	.page-title {
		color: #ffffff;
	}
	
	.order-item {
		background-color: #1e1e1e;
		border-color: #333333;
	}
	
	.status-text {
		color: #ffffff;
	}
	
	.product-name {
		color: #ffffff;
	}
	
	.delivery-status {
		border-bottom-color: #333333;
	}
}
</style>
